<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="delay-deliver"
    title="延期发货"
    append-to-body
    width="50%"
  >
    <div v-if="visible" class="delay-container">
      <el-form
        label-width="140px"
        class="delay-form"
        :model="postData"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="延期时间：" prop="nextTime">
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="postData.nextTime"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :editable="false"
            type="date"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="延期原因：" prop="nextRemark">
          <el-row class="check">
            <el-checkbox-group v-model="checkList" @change="onChangeCheck">
              <template v-for="item in nextRemarks">
                <el-checkbox
                  class="check-item"
                  :label="item.id"
                  :key="item.id"
                >{{ item.text }}</el-checkbox>
              </template>
            </el-checkbox-group>
          </el-row>
          <el-row class="next-remark">
            <el-input v-model="postData.nextRemark" type="textarea" :rows="4" />
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        :loading="submitLoading"
        @click="onSubmit"
        type="primary"
        v-if="isEdit"
      >提交
      </el-button>
      <el-button
        v-if="!isEdit && nextFlag === 2"
        :loading="submitLoading"
        @click="onSubmit"
        type="danger"
        plain
      >再次延期发货
      </el-button>
      <el-button
        v-if="!isEdit && nextFlag === 2"
        :loading="submitLoading"
        @click="onUpdateFlag"
        type="primary"
      >已处理
      </el-button>
      <el-button
        :loading="submitLoading"
        @click="onClose"
      >关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { update, updateFlag } from "@/api/charges/logistics";
import { mapGetters } from "vuex";

export default {
  name: "delayDeliver",
  data() {
    return {
      submitLoading: false,
      pickerOptions: {
        disabledDate(d) {
          let time = new Date();
          return d.getTime() < time.getTime();
        }
      },
      visible: false,
      postData: {},
      rules: {
        nextTime: [
          { required: true, message: "请选择延期时间", trigger: ["blur","change"] },
        ],
        nextRemark: [
          { required: true, message: "请输入延期原因", trigger: ["blur","change"] },
        ],
      },
      checkList: [],
      nextFlag: 2,
      isEdit: true,
    }
  },
  computed: {
    ...mapGetters(["nextRemarks"]),
    nextRemarkMap() {
      let res = {};
      this.nextRemarks.forEach(item => {
        res[item.id] = item.text;
      });
      return res;
    }
  },
  methods: {
    open(row) {
      this.postData = {
        nextTime: row.nextTime,
        nextRemark: row.nextRemark,
        id: row.id,
      };
      this.checkList = [];
      if(row.nextRemark) {
        let strs = row.nextRemark.split("，");
        let checkItem;
        strs.forEach(item => {
          checkItem = this.nextRemarks.filter(remark => {
            return remark.text === item;
          });
          if(checkItem && checkItem.length) {
            this.checkList.push(checkItem[0].id);
          }
        });
      }
      this.rules.nextTime[0].required = true;
      this.rules.nextRemark[0].required = true;
      this.isEdit = true;
      this.visible = true;
    },
    // 只查看，不编辑
    showDetail(row) {
      let { id, nextTime, nextRemark, nextFlag } = row;
      this.postData = {
        nextTime,
        nextRemark,
        id,
      };
      this.rules.nextTime[0].required = false;
      this.rules.nextRemark[0].required = false;
      this.isEdit = false;
      this.nextFlag = nextFlag === 1 ? 1:2;
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if(valid) {
          this.submitLoading = true;
          let data = {
            ...this.postData,
          }
          data.nextTime = `${this.postData.nextTime} 00:00:00`;
          update(data).then(() => {
            this._success();
          }).catch(error => {
            console.error(error);
            this.submitLoading = false;
          });
        }
      });
    },
    onChangeCheck() {
      let text = "";
      this.checkList.forEach(item => {
        text += "，" + this.nextRemarkMap[item];
      });
      this.postData.nextRemark = text.substring(1);
    },
    onUpdateFlag() {
      let data = {
        flag: 1,
        orderId: this.postData.id,
      }
      this.submitLoading = true;
      updateFlag(data).then(() => {
        this._success();
      }).catch(error => {
        console.error(error);
        this.submitLoading = false;
      });
    },
    _success() {
      this.submitLoading = false;
      this.$notify({
        title: "操作成功",
        type: "success"
      });
      this.visible = false;
      this.$emit("success");
    },
  },
}
</script>

<style lang="scss" scoped>
.delay-container {
  /deep/.el-textarea {
    &.is-disabled {
      .el-textarea__inner {
        background-color: #FFF;
        color: #666;
      }
    }
  }

  /deep/.el-input {
    &.is-disabled {
      .el-input__inner {
        background-color: #FFF;
        color: #666;
      }
    }
  }
}

</style>
